<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Menu Maker Installation Instructions</title>

<style type="text/css">
   body{padding:20px; font-size:14px; color:#000000; font-family:Arial, Helvetica, sans-serif;}
   h2 {font-weight:bold; color:#000099; margin:10px 0px; }
   p span {color:#006600; font-weight:bold; }
   a, a:link, a:visited {color:#0000FF;}
   textarea {width: 100%; padding: 10px; margin: 10px 0 15px 0; font-size: 13px; font-family: Consolas,monospace;}
   textarea.html {height: 300px;}
   p {margin: 0 0 10px 0;}
   code, pre {font-family: Consolas,monospace; color: green;}
   ol li {margin: 0 0 15px 0;}
</style>

</head>

<body>

<h2>Your Menu</h2>

	<style type="text/css">/******   H3    */
		#cssmenu ul{
			margin:0;
			padding:0;
			list-style-type:none;
			width:auto;
			position:relative;
			display:block;
			height:36px;
			text-transform:uppercase;
			font-size:12px;
			font-weight:bold;
			background:transparent url('menu_assets/images/OFF.gif') repeat-x top left;
			font-family:Helvetica,Arial,Verdana,sans-serif;
			border-bottom:4px solid #336666;
			border-top:1px solid #C0E2D4;
		}
		#cssmenu li{
			/*display:block;*/
			float:left;
			margin:0;
			padding:0;}
		#cssmenu li a{
			display:block;
			float:left;
			color:#874B46;
			text-decoration:none;
			font-weight:bold;
			padding:12px 20px 0 20px;
			height:24px;
			background:transparent url('menu_assets/images/DIVIDER.gif') no-repeat top right;
			}
		#cssmenu li a:hover{
			background:transparent url('menu_assets/images/HOVER.gif') no-repeat top right;	
			}
	</style>
<div id='cssmenu'>
<ul>
   <li class='active '><a href='#'><span>Home</span></a></li>
   <li><a href='#'><span>Products</span></a></li>
   <li><a href='#'><span>Company</span></a></li>
   <li><a href='#'><span>Contact</span></a></li>
</ul>
</div>
<div style="clear:both; margin: 0 0 30px 0;">&nbsp;</div>

<h2>Installation Instructions</h2>

<ol>
   <li>Upload the <code>menu_assets</code> folder to the root directory of your website. This is usually where your <code>index.html</code> file is.</li>
   <li>Copy and paste the code below somewhere between the <code>&lt;head>&lt;/head></code> tags.<textarea class='css'><link href="/menu_assets/styles.css" rel="stylesheet" type="text/css"></textarea></li>
   <li>Copy and paste the html below where ever you want your menu to show up.<textarea class='html'><div id='cssmenu'>
<ul>
   <li class='active '><a href='#'><span>Home</span></a></li>
   <li><a href='#'><span>Products</span></a></li>
   <li><a href='#'><span>Company</span></a></li>
   <li><a href='#'><span>Contact</span></a></li>
</ul>
</div></textarea></li>
</ol>

<h2>Notes</h2>
<ol>
   <li>If you run into a problem getting your menu to work or have suggestions for the site please <a href='http://cssmenumaker.com/resources/contact'>Contact Us</a> and let us know. We will try to help as much as possible.</li>
</ol>

</body>
</html>